<template>
    <div>
        <div>
            <el-dialog class="nyDialog" :visible.sync="is_dialog_show" width="42%" :close-on-click-modal="false"
                :before-close="() => { this.close(); }">
                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;">
                    <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                        <div class="text-f14">报告封面（封面尺寸：1190px*1714px）</div>
                        <i class="el-icon-circle-close   cursor-pointer" @click.stop="close()"></i>
                    </div>
                    <div class="w-full" style="height:700px">
                        <el-table :data="s_company.list_cover" stripe style="width: 100%;" height="700px">
                            <el-table-column type="index" label="序号" min-width="10%">
                            </el-table-column>
                            <el-table-column prop="assess_name" label="量表名称" min-width="30%">
                            </el-table-column>
                            <el-table-column prop="cover_url" label="报告封面" min-width="30%">
                                <template slot-scope="scope">
                                    <el-image style="width: 100px; height: 100px" :src="scope.row.cover_url" 
                                        :preview-src-list="scope.row.cover_url_list" v-if="scope.row.cover_id">
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" min-width="20%">
                                <template slot-scope="scope">
                                    <el-upload class="upload-demo" action="" :show-file-list="false"
                                        :on-change="(file, fileList) => action_select_file_list(file, fileList, scope.row.assess_id)"
                                        :auto-upload="false" accept="image/png, image/jpeg">
                                        <el-button size="mini">
                                            {{ scope.row.cover_id ? '修改' : '添加' }}
                                        </el-button>
                                    </el-upload>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import DZServiceCompany from "@/views/公司管理/service/DZServiceCompany";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component
export default class UiDialogCompanyCover extends Vue {

    @Prop() is_showDialog;

    @Prop() data;

    is_dialog_show = false;

    s_company = new DZServiceCompany();


    created() { }

    mounted() {
    }

    beforeDestroy() { }

    close() {
        this.$emit('nydialog_closed', '');
        this.initDialog();
    }
    initDialog() {
        this.is_dialog_show = false;
    }

    @Watch("is_showDialog")
    watchShowDialog(value: any, oldValue: string) {
        this.is_dialog_show = value;
    }
    @Watch("data")
    watchData(value: string, oldValue: string) {
        if (this.data) {
            this.s_company.net_list_cover(this.data);
        }
    }

    action_select_file_list(file, fileList, assessId) {
        if (file.status == "ready") {
            this.s_company.net_add_cover(assessId, this.data, file.raw, () => {
                this.s_company.net_list_cover(this.data);
            });
        }
    }


}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    border-radius: 4px !important;
    border: none;
}

/deep/.el-dialog__body {
    text-align: left;
    // min-height: 22vw;
    padding: 0px;
}

/deep/ .dialog-tips {
    margin-top: 0 !important;
}

/deep/ .el-dialog__footer {
    text-align: right;
}

/deep/.el-dialog__header {
    height: 0px;
    padding: 0;
}

/deep/ .el-icon-close:before {
    content: '';
}

.nyDialog {
    background: none;
}
</style>
